<template>
    <div class="bright">
        <!--地图-->
        <div id="myMap"></div>
        <!-- 头部区域 -->
        <header>
            <!-- 项目标题 -->
            <p class="title-name">
                <span>城市管理夜景亮化管理平台</span>
            </p>
            <!-- 夜景亮化道路覆盖一张图 -->
            <div class="deadline-box">夜景亮化道路覆盖一张图</div>
            <!-- 头部背景图 -->
            <div class="header-bg"></div>
            <!-- 头部底端光点 -->
            <div class="bottom-light"></div>
            <!-- 中央“夜景亮化道路覆盖一张图” -->
            <div class="center-text">夜景亮化道路覆盖一张图</div>
            <!-- 右上角“展开”、“收起”按钮 -->
            <div class="collapse-box">
                <img id="openPage" src="../../assets/img/bright/open.png" alt="展开" @click="collapsePage(1)">
                <img id="closePage" src="../../assets/img/bright/close.png" alt="收起" @click="collapsePage(2)">
            </div>
        </header>
        <!-- 主体内容 -->
        <section class="main-box">
            <div class="content-area">
                <div class="left-title-name">
                    <span>重点区域</span>
                </div>
                <div class="content-area-info">
                    <div class="left-content-row">
                        <!-- 重点区域 -->
                        <div class="border-box key-areas">
                            <div class="top-light-img"></div>
                            <div class="overflow-box">
                                <ul class="number-area">
                                    <li>
                                        <p class="number-p">
                                            <span id="blockNumber">6</span>
                                            <span class="number-unit">个</span>
                                        </p>
                                        <p class="name-p">
                                            <span>街区数量</span>
                                        </p>
                                    </li>
                                    <li>
                                        <p class="number-p">
                                            <span id="areaNumber">4595</span>
                                            <span class="number-unit">km²</span>
                                        </p>
                                        <p class="name-p">
                                            <span>街区总面积</span>
                                        </p>
                                    </li>
                                </ul>
                                <div class="table-head">
                                    <table>
                                        <tr>
                                            <td>街区名称</td>
                                            <td>地址</td>
                                            <td>街区面积 m</td>
                                        </tr>
                                    </table>
                                </div>
                                <div id="blockTable" class="table-body">
                                    <div id="blockTableBox">
                                        <table>
                                            <tr>
                                                <td>咖啡街区</td>
                                                <td>唐延路科技六路</td>
                                                <td>12534</td>
                                            </tr>
                                            <tr>
                                                <td>咖啡街区</td>
                                                <td>唐延路科技六路</td>
                                                <td>12534</td>
                                            </tr>
                                            <tr>
                                                <td>咖啡街区</td>
                                                <td>唐延路科技六路</td>
                                                <td>12534</td>
                                            </tr>
                                            <tr>
                                                <td>咖啡街区</td>
                                                <td>唐延路科技六路</td>
                                                <td>12534</td>
                                            </tr>
                                            <tr>
                                                <td>咖啡街区</td>
                                                <td>唐延路科技六路</td>
                                                <td>12534</td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div id="blockTableBox1"></div>
                                </div>
                            </div>
                        </div>
                        <!-- 城市亮化名称 -->
                        <div class="border-box every-title-name">
                            <div class="bottom-light-img"></div>
                            <span>城市亮化</span>
                        </div>
                        <!-- 城市亮化列表 -->
                        <div class="border-box city-bridge">
                            <div class="top-light-img"></div>
                            <div class="overflow-box">
                                <div class="bridge-switch-block">
                                    <div id="bridgeSwitchLeft" class="bridge-switch-left switch-block-active" @click="switchBridgeBlock(1)">公园点亮：6个</div>
                                    <div id="bridgeSwitchCenter" class="bridge-switch-center switch-block-no" @click="switchBridgeBlock(2)">道路点亮</div>
                                    <div id="bridgeSwitchRight" class="bridge-switch-right switch-block-no" @click="switchBridgeBlock(3)">楼体点亮</div>
                                </div>
                                <div id="parkHead" class="table-head">
                                    <table>
                                        <tr>
                                            <td>街区名称</td>
                                            <td>地址</td>
                                            <td>街区面积 m</td>
                                        </tr>
                                    </table>
                                </div>
                                <div id="parkTable" class="table-body">
                                    <div id="parkTableBox">
                                        <table>
                                            <tr>
                                                <td>咖啡街区</td>
                                                <td>唐延路科技六路</td>
                                                <td>12534</td>
                                            </tr>
                                            <tr>
                                                <td>咖啡街区</td>
                                                <td>唐延路科技六路</td>
                                                <td>12534</td>
                                            </tr>
                                            <tr>
                                                <td>咖啡街区</td>
                                                <td>唐延路科技六路</td>
                                                <td>12534</td>
                                            </tr>
                                            <tr>
                                                <td>咖啡街区</td>
                                                <td>唐延路科技六路</td>
                                                <td>12534</td>
                                            </tr>
                                            <tr>
                                                <td>咖啡街区</td>
                                                <td>唐延路科技六路</td>
                                                <td>12534</td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div id="parkTableBox1"></div>
                                </div>
                                <div id="roaLighting" class="road-lighting">
                                    <ul>
                                        <li>
                                            <p class="number-p">
                                                <span id="functionNum">151</span>
                                                <span class="number-unit">条</span>
                                            </p>
                                            <p class="name-p">
                                                <span>功能性亮化道路</span>
                                            </p>
                                        </li>
                                        <li>
                                            <p class="number-p">
                                                <span id="funRoadRate">51.01</span>
                                                <span class="number-unit">%</span>
                                            </p>
                                            <p class="name-p">
                                                <span>道路覆盖率</span>
                                            </p>
                                        </li>
                                    </ul>
                                    <ul>
                                        <li>
                                            <p class="number-p">
                                                <span id="decorateNum">151</span>
                                                <span class="number-unit">条</span>
                                            </p>
                                            <p class="name-p">
                                                <span>装饰性亮化道路</span>
                                            </p>
                                        </li>
                                        <li>
                                            <p class="number-p">
                                                <span id="decoRoadRate">51.01</span>
                                                <span class="number-unit">%</span>
                                            </p>
                                            <p class="name-p">
                                                <span>道路覆盖率</span>
                                            </p>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>


                        <!-- 夜景亮化数字城管巡检名称 -->
                        <div class="border-box every-title-name">
                            <div class="bottom-light-img"></div>
                            <span>夜景亮化数字城管巡检结果</span>
                            <span id="endTime">截至：2020年10月20日</span>
                        </div>
                        <!-- 夜景亮化数字城管巡检统计图 -->
                        <div class="border-box case-statistics">
                            <div class="top-light-img"></div>
                            <div class="overflow-box road-other-data">
                                <ul class="left-case-data">
                                    <li>
                                        <p>案件总量：<span id="caseNum">676</span>件</p>
                                        <p>已转办：<span id="transferred">124</span>件</p>
                                        <p>未转办：<span id="noTransferred">124</span>件</p>
                                    </li>
                                    <li>
                                        <p>结案率：<span id="closingRate">87%</span></p>
                                        <p>按时：<span id="onTime">87%</span>超时：<span id="overtime">87%</span></p>
                                    </li>
                                </ul>
                                <div id="rightChart"></div>
                            </div>
                        </div>
                    </div>
                    <div class="center-content-row"></div>
                    <div class="right-content-row"></div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
    export default {
        name: "Bright",
        data () {
            return {
                // 高德地图
                GDMap: null,
            }
        },
        methods: {
            /**
             * Description:高德地图初始化
             * Author:ybt
             * Date:2020/12/17
             */
            initMap() {
                this.GDMap = new AMap.Map("myMap", {
                    mapStyle: "amap://styles/6f8a9c431c03a423de43182d250f1a75",
                    zoom: 14,
                    viewMode: "3D",
                    center: [108.976877, 34.222629],
                    features: ["bg", "road", "building"],
                    resizeEnable: true
                });
                this.GDMap.setFitView();// 执行定位
            },
            /**
             * Description:监听“展开”、“收起”按钮操作
             * Author:ybt
             * Date:2020/12/17
             */
            collapsePage(type){
                if (type === 1) {
                    $('#openPage').css('display', 'none');
                    $('#closePage').css('display', 'block');
                    $('.left-content-row').css('transform', 'translateX(0px)');
                    $('.left-content-row').css('transition', 'transform 0.4s');
                    $('.left-title-name').css('transform', 'translateX(0px)');
                    $('.left-title-name').css('transition', 'transform 0.4s');
                } else if (type === 2) {
                    $('#openPage').css('display', 'block');
                    $('#closePage').css('display', 'none');
                    $('.left-content-row').css('transform', 'translateX(-600px)');
                    $('.left-content-row').css('transition', 'transform 0.4s');
                    $('.left-title-name').css('transform', 'translateX(-600px)');
                    $('.left-title-name').css('transition', 'transform 0.4s');
                }
            },
            /**
             * Description:重点区域街区列表滚动效果
             * Author:ybt
             * Date:2020/12/17
             */
            areaListScrolling(){
                let speed = 60;
                document.getElementById("blockTableBox1").innerHTML = document.getElementById("blockTableBox").innerHTML;
                function Marquee() {
                    if (document.getElementById("blockTableBox1").offsetHeight - document.getElementById("blockTable").scrollTop <= 0) {
                        document.getElementById("blockTable").scrollTop -= document.getElementById("blockTableBox").offsetHeight;
                    } else {
                        document.getElementById("blockTable").scrollTop++;
                    }
                }
                let MyMar = setInterval(Marquee, speed);
                document.getElementById("blockTable").onmouseover = function() {
                    clearInterval(MyMar);
                };
                document.getElementById("blockTable").onmouseout = function() {
                    MyMar = setInterval(Marquee, speed);
                }
            },
            /**
             * Description:监听城市排水设施切换操作
             * Author:ybt
             * Date:2020/12/17
             */
            switchBridgeBlock(type){
                if (type === 1) {
                    $('#bridgeSwitchLeft').removeClass('switch-block-no').addClass('switch-block-active');
                    $('#bridgeSwitchCenter').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#bridgeSwitchRight').removeClass('switch-block-active').addClass('switch-block-no');

                    $('#parkHead').css('display', 'block');
                    $('#parkTable').css('display', 'block');
                    $('#roaLighting').css('display', 'none');
                } else if (type === 2) {
                    $('#bridgeSwitchLeft').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#bridgeSwitchCenter').removeClass('switch-block-no').addClass('switch-block-active');
                    $('#bridgeSwitchRight').removeClass('switch-block-no').addClass('switch-block-no');

                    $('#parkHead').css('display', 'none');
                    $('#parkTable').css('display', 'none');
                    $('#roaLighting').css('display', 'block');
                } else if (type === 3) {
                    $('#bridgeSwitchLeft').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#bridgeSwitchCenter').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#bridgeSwitchRight').removeClass('switch-block-no').addClass('switch-block-active');

                    $('#parkHead').css('display', 'none');
                    $('#parkTable').css('display', 'none');
                    $('#roaLighting').css('display', 'none');
                }
            },
            /**
             * Description:城市亮化公园列表滚动效果
             * Author:ybt
             * Date:2020/12/17
             */
            parkListScrolling(){
                let speed = 60;
                document.getElementById("parkTableBox1").innerHTML = document.getElementById("parkTableBox").innerHTML;
                function Marquee() {
                    if (document.getElementById("parkTableBox1").offsetHeight - document.getElementById("parkTable").scrollTop <= 0) {
                        document.getElementById("parkTable").scrollTop -= document.getElementById("parkTableBox").offsetHeight;
                    } else {
                        document.getElementById("parkTable").scrollTop++;
                    }
                }
                let MyMar = setInterval(Marquee, speed);
                document.getElementById("parkTable").onmouseover = function() {
                    clearInterval(MyMar);
                };
                document.getElementById("parkTable").onmouseout = function() {
                    MyMar = setInterval(Marquee, speed);
                }
            },
            /**
             * Description:初始化夜景亮化数字城管巡检统计图
             * Author:ybt
             * Date:2020/12/17
             */
            initRoadOtherChart(){
                //初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("rightChart"));
                let index = 0;
                let colorList = ['#9e101e', '#a02713', '#a04212', '#a0570e', '#eaad1b'];
                let option = {
                    legend: {
                        show: false
                    },
                    grid: {
                        left: '42%',
                        right: '5%',
                        top: '5%',
                        bottom: '5%',
                    },
                    xAxis: {
                        type: 'value',

                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        }

                    },
                    yAxis: {
                        type: 'category',
                        inverse: true,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisPointer: {
                            label: {
                                show: true,
                                margin: 30
                            }
                        },
                        data: ['垃圾堆积', '共享单车乱停放', '井盖丢失', '道路破损', '交通标线不清楚'],
                        axisLabel: {
                            margin: 140,
                            fontSize: 14,
                            align: 'left',
                            color: '#ffffff',
                            rich: {
                                a1: {
                                    color: '#fff',
                                    backgroundColor: colorList[0],
                                    width: 20,
                                    height: 20,
                                    align: 'center',
                                    borderRadius: 2
                                },
                                a2: {
                                    color: '#fff',
                                    backgroundColor: colorList[1],
                                    width: 20,
                                    height: 20,
                                    align: 'center',
                                    borderRadius: 2
                                },
                                a3: {
                                    color: '#fff',
                                    backgroundColor: colorList[2],
                                    width: 20,
                                    height: 20,
                                    align: 'center',
                                    borderRadius: 2
                                },
                                a4: {
                                    color: '#fff',
                                    backgroundColor: colorList[3],
                                    width: 20,
                                    height: 20,
                                    align: 'center',
                                    borderRadius: 2
                                },
                                a5: {
                                    color: '#fff',
                                    backgroundColor: colorList[4],
                                    width: 20,
                                    height: 20,
                                    align: 'center',
                                    borderRadius: 2
                                }
                            },
                            formatter: function(params) {
                                index++;
                                if (index > 5) {
                                    index = 1
                                }
                                return [
                                    '{a' + index + '|' + index + '}' + '  ' + params
                                ].join('\n')
                            }
                        }
                    },
                    series: [{
                        z: 2,
                        name: 'value',
                        type: 'bar',
                        data: [3.66, 2.86, 1.82, 1.8, 1.53].map((item, i) => {
                            let itemStyle = {
                                color: colorList[i]
                            };
                            return {
                                value: item,
                                itemStyle: itemStyle
                            };
                        }),
                        barWidth: 15,
                        label: {
                            show: true,
                            position: [0,2],
                            color: '#ffffff',
                            fontSize: 12,
                            offset: [5, 0]
                        }
                    }

                    ]
                };
                //使用制定的配置项和数据显示图表
                myChart.setOption(option);
                window.addEventListener("resize", function() {
                    myChart.resize();
                });
            }
        },
        mounted(){
            document.title = "城市管理夜景亮化管理平台";
            // 初始化高德地图
            this.initMap();
            // 重点区域街区列表滚动效果
            this.areaListScrolling();
            // 城市亮化公园列表滚动效果
            this.parkListScrolling();
            // 初始化夜景亮化数字城管巡检统计图
            this.initRoadOtherChart();
        }
    }
</script>

<style lang="less">
    .bright{
        width: 100%;
        height: 1080px;
        display: flex;
        flex-direction: column;
        background-color: #04093f;
        line-height: 1.15;
        position: relative;
        overflow: hidden;
        cursor: default;
        #myMap {
            width: 24rem;
            height: 13.5rem;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }
        /* 头部样式 */
        header {
            height: 1.375rem; // 110px
            padding-top: 0.32rem;
            position: relative;
            background: linear-gradient(to bottom, rgba(0, 1, 39, 1),rgba(4, 9, 63, 0.9));
            z-index: 99;
            .title-name{
                height: 1.125rem;
                line-height: 1.125rem;
                text-align: center;
                span {
                    font-size: 0.6875rem; // 55px
                    /* 引入外部字体样式 */
                    font-family: 'MF-FangHei';
                    background: linear-gradient(to right, #0178f7, #00ebfe, #00ebfe, #00a9ff);
                    -webkit-background-clip: text;
                    color: transparent;
                }
            }
            .deadline-box{
                position: absolute;
                left: 0.25rem;
                top: 0.3rem;
                width: 2.7875rem;
                height: 0.525rem;
                line-height: 0.525rem;
                text-align: center;
                color:#07f7f0;
                font-family: 'FZLTZH_GBK';
                font-size: 0.22rem;
                background: url(../../assets/img/bright/small-border.png) no-repeat;
                z-index: 100;
            }
            .header-bg{
                position: absolute;
                bottom: 0;
                width: 100%;
                height: 0.7375rem;
                background: url(../../assets/img/bright/header-border.png) no-repeat;
                background-size: 100% 100%;
            }
            .bottom-light{
                position: absolute;
                bottom: -0.8125rem;
                left: calc(50% - 4.7875rem);
                width: 9.5875rem;
                height: 1.6625rem;
                background: url(../../assets/img/bright/big-light.png) no-repeat;
                background-size: 100% 100%;
                z-index: 100;
            }
            .center-text{
                position: absolute;
                left: calc(50% - 2.05rem);
                top: 1.35rem; // 108px
                width: 4.1rem;
                height: 0.7625rem;
                line-height: 0.7625rem;
                text-align: center;
                color:#07f7f0;
                font-family: 'FZLTZH_GBK';
                font-size: 0.3rem;
                background: url(../../assets/img/bright/big-border.png) no-repeat;
            }
            .collapse-box{
                position: absolute;
                top: 0.15rem;
                right: 0.275rem;
                img{
                    width: 0.4rem; // 32px
                    height: 0.325rem; // 26px
                    cursor: pointer;
                }
                #openPage{
                    display: none;
                }
                #closePage{
                    display: block;
                }
            }
        }

        /* 主体内容样式 */
        .main-box{
            display: flex;
            flex: 1;
            font-family: 'FZLTZH_GBK' !important;
            .content-area{
                display: flex;
                flex: 1;
                position: relative;
                .left-title-name{
                    position: absolute;
                    left: 0.25rem;
                    top: -0.7875rem;
                    width: 7.15rem;
                    height: 0.975rem;
                    background: url(../../assets/img/bright/left-title.png) no-repeat;
                    background-size: 100% 100%;
                    color: #08faf5;
                    font-size: 0.2625rem;
                    z-index: 100;
                    span{
                        position: absolute;
                        bottom: 0.1375rem;
                        left: 3.125rem; // 250px
                    }
                }
            }
            .content-area-info{
                display: flex;
                flex-direction: row;
                flex: 1;
                overflow: hidden;
                /* 主体内容公共样式——开始 */
                .border-box{
                    border: 1px solid #18397b;
                    position: relative;
                    margin-top: 0.125rem;
                    .top-light-img{
                        position: absolute;
                        top: 0;
                        left: calc(50% - 3.5rem);
                        width: 7rem;
                        height: 0.9625rem;
                        background: url(../../assets/img/bright/light1.png) no-repeat;
                        background-size: 100% 100%;
                    }
                    .bottom-light-img{
                        position: absolute;
                        top: -0.4125rem;
                        left: calc(50% - 2.9375rem);
                        width: 6.2125rem;
                        // width: 5.875rem;
                        height: 0.975rem;
                        background: url(../../assets/img/bright/light2.png) no-repeat;
                        background-size: 100% 100%;
                        z-index: -1;
                    }
                    .overflow-box{
                        position: relative;
                        width: 100%;
                        height: 100%;
                        overflow: hidden;
                        display: flex;
                        flex-direction: column;
                        font-size: 0.2325rem;
                        /* 选中的切换块样式 */
                        .switch-block-active{
                            font-size: 0.2125rem;
                            color: #f66afe;
                        }
                        /* 未选中的切换块样式 */
                        .switch-block-no{
                            font-size: 0.1875rem;
                            color:#ffffff;
                        }
                    }
                }
                /* 小标题名称样式 */
                .every-title-name{
                    position: relative;
                    width: 100%;
                    height: 0.575rem;
                    line-height: 0.575rem;
                    text-align: center;
                    color: #08faf5;
                    font-size: 0.2625rem;
                    #endTime{
                        position: absolute;
                        top: 0.0625rem;
                        right: 0.125rem;
                        color: #ffffff;
                        font-size: 0.15rem;
                    }
                }
                /* 数据滚动列表样式 */
                .table-head{
                    color: #f66afe;
                    height: 0.6875rem; // 55px
                    line-height: 0.6875rem;
                    tr{
                        height: 0.6875rem;
                        line-height: 0.6875rem;
                    }
                }
                .table-body{
                    color: #fff;
                    overflow: hidden;
                    tr{
                        height: 0.575rem; // 46px
                        line-height: 0.575rem;
                    }
                }
                .table-head,.table-body{
                    font-size: 0.2rem;
                    text-align: center;
                    table{
                        border-collapse: collapse;
                        tr {
                            td{
                                font-weight: normal !important;
                                border-bottom: 1px solid #18397b;
                            }
                            td:nth-of-type(1){
                                width: 2rem; // 160px
                            }
                            td:nth-of-type(2){
                                width: 3.25rem; // 260px
                            }
                            td:nth-of-type(3){
                                width: 1.875rem; // 150px
                            }
                        }
                    }
                }
                /* 主体内容公共样式——结束 */
                .left-content-row{
                    display: flex;
                    flex-direction: column;
                    width: 7.4rem;
                    padding: 0.1875rem 0 0.1875rem 0.25rem;
                    background: linear-gradient(to right, rgba(0, 1, 39, 0.9),rgba(4, 9, 63, 0.75));
                    z-index: 10;
                    /* 重点区域 */
                    .key-areas{
                        height: 4.2125rem; // 337px
                        .number-area{
                            display: flex;
                            flex-direction: row;
                            height: 1.225rem; // 98px
                            padding: 0.2rem; // 16px
                            border-bottom: 1px solid #18397b;
                            li{
                                display: flex;
                                flex-direction: column;
                                justify-content: center;
                                flex: 1;
                                font-size: 0.2rem;
                                color: #ffffff;
                                .number-p{
                                    text-align: center;
                                    span:first-of-type{
                                        color: #f66afe;
                                        font-size: 0.3rem;
                                    }
                                }
                                .name-p{
                                    text-align: center;
                                    line-height: 0.325rem;
                                }
                            }
                            li:first-of-type{
                                border-right: 1px solid #14428a;
                            }
                        }
                        .table-body{
                            height: 2.3375rem; // 187px
                        }
                    }
                    .city-bridge{
                        display: flex;
                        flex-direction: column;
                        height: 2.9625rem;
                        .bridge-switch-block{
                            position: relative;
                            height: 0.5625rem;
                            border-bottom: 1px solid #18397b;
                            line-height: 0.575rem;
                            display: flex;
                            .bridge-switch-left{
                                width: 2.625rem;
                                height: 0.55rem;
                                text-align: center;
                                cursor: pointer;
                            }
                            .bridge-switch-center{
                                position: absolute;
                                top: 0;
                                left: 2.1625rem;
                                width: 2.9rem;
                                height: 0.55rem;
                                text-align: center;
                                cursor: pointer;
                            }
                            .bridge-switch-right{
                                position: absolute;
                                top: 0;
                                right: 0;
                                width: 2.575rem;
                                height: 0.55rem;
                                text-align: center;
                                cursor: pointer;
                            }
                            /* 选中的切换块样式 */
                            .bridge-switch-left.switch-block-active{
                                background: url(../../assets/img/bright/3-1-1.png) no-repeat;
                                background-size: 100% 100%;
                            }
                            .bridge-switch-center.switch-block-active{
                                background: url(../../assets/img/bright/3-2-1.png) no-repeat;
                                background-size: 100% 100%;
                            }
                            .bridge-switch-right.switch-block-active{
                                background: url(../../assets/img/bright/3-3-1.png) no-repeat;
                                background-size: 100% 100%;
                            }
                            /* 未选中的切换块样式 */
                            .bridge-switch-left.switch-block-no{
                                background: url(../../assets/img/bright/3-1-2.png) no-repeat;
                                background-size: 100% 100%;
                            }
                            .bridge-switch-center.switch-block-no{
                                background: url(../../assets/img/bright/3-2-2.png) no-repeat;
                                background-size: 100% 100%;
                            }
                            .bridge-switch-right.switch-block-no{
                                background: url(../../assets/img/bright/3-3-2.png) no-repeat;
                                background-size: 100% 100%;
                            }
                        }
                        .table-body{
                            height: 1.75rem; // 140px
                        }
                        .road-lighting{
                            display: flex;
                            flex-direction: column;
                            height: 2.375rem; // 190px
                            display: none;
                            ul{
                                display: flex;
                                flex-direction: row;
                                height: 1.2rem; // 96px
                                padding: 0.2rem; // 16px
                                border-bottom: 1px solid #18397b;
                                li{
                                    display: flex;
                                    flex-direction: column;
                                    justify-content: center;
                                    flex: 1;
                                    font-size: 0.2rem;
                                    .number-p{
                                        text-align: center;
                                        span:first-of-type{
                                            font-size: 0.3rem;
                                        }
                                    }
                                    .name-p{
                                        text-align: center;
                                        line-height: 0.325rem;
                                    }
                                }
                                li:first-of-type{
                                    border-right: 1px solid #14428a;
                                }
                                .number-unit{
                                    color: #ffffff;
                                }
                            }
                            ul:first-of-type li{
                                .number-p{
                                    span:first-of-type{
                                        color: #00ecff;
                                    }
                                }
                                .name-p{
                                    color: #01b9cf;
                                }
                            }
                            ul:last-of-type{
                                .number-p{
                                    span:first-of-type{
                                        color: #f66afe;
                                    }
                                }
                                .name-p{
                                    color: #c754d7;
                                }
                            }
                        }
                    }
                    /* 夜景亮化数字城管巡检统计图——案件、其他 */
                    .case-statistics{
                        height: 2.775rem; // 222px
                        .road-other-data{
                            display: flex;
                            flex-direction: row !important;
                            .left-case-data{
                                width: 2.625rem; // 210px
                                border-right: 1px solid #18397b;
                                font-size: 0.2rem;
                                color: #ffffff;
                                padding: 0.125rem;
                                li:first-of-type{
                                    height: 1.6125rem;
                                    border-bottom: 1px solid #18397b;
                                    p{
                                        line-height: 0.45rem;
                                        #caseNum{
                                            font-size: 0.325rem;
                                            color: #f66afe;
                                            margin-right: 0.125rem;
                                        }
                                    }
                                    p:first-of-type{
                                        line-height: 0.5375rem;
                                    }
                                }
                                li:last-of-type{
                                    padding-top: 0.125rem;
                                    p{
                                        line-height: 0.375rem;
                                        #closingRate{
                                            font-size: 0.275rem;
                                            color: #f66afe;
                                        }
                                        #onTime{
                                            margin-right: 0.1875rem;
                                        }
                                    }
                                }
                            }
                            #rightChart{
                                flex: 1;
                            }
                        }
                    }
                }
                .center-content-row{
                    flex: 1;
                    // width: 9.125rem; // 730px
                }
                .right-content-row{
                    width: 7.4rem;
                }
            }
        }
    }
</style>
